<template>
  <div class="detail-container">
    <el-card shadow="never">
      <span class="font-title-medium">文章详情</span>
      <el-table
        border
        class="standard-margin"
        ref="productTable"
        :data="productList">
        <el-table-column label="文章标题" width="160" align="center">
          <template slot-scope="scope">
<!--            <img style="height:80px" :src="scope.row.title">-->
            <span class="font-small">{{scope.row.title}}</span><br>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            <span class="font-small">{{scope.row.createdTime}}</span><br>
<!--            <span class="font-small">品牌：{{scope.row.productBrand}}</span>-->
          </template>
        </el-table-column>
        <el-table-column label="内容" width="180" align="center">
          <template slot-scope="scope">
            <span class="font-small">{{scope.row.content}}</span><br>
          </template>
        </el-table-column>
        <el-table-column label="描述" width="180" align="center">
          <template slot-scope="scope">{{scope.row.description}}</template>
        </el-table-column>
        <el-table-column label="图片" width="100" align="center">
          <template slot-scope="scope">{{scope.row.img}}</template>
        </el-table-column>
        <el-table-column label="修改时间" width="100" align="center">
          <template slot-scope="scope">{{scope.row.updatedTime}}</template>
        </el-table-column>

      </el-table>
    </el-card>
  </div>
</template>
<script>
import {detailsArticle, fetchListArticle, updatedArticle} from '../../../api/returnArticle';
  const defaultUpdateStatusParam = {
    companyAddressId: null,
    handleMan: 'admin',
    handleNote: null,
    receiveMan: 'admin',
    receiveNote: null,
    returnAmount: 0,
    status: 0
  };
  const defaultarticleReturnDetail = {
    id: null,
    orderId: null,
    companyAddressId: null,
    productId: null,
    orderSn: null,
    createTime: null,
    memberUsername: null,
    returnAmount: null,
    returnName: null,
    returnPhone: null,
    status: null,
    handleTime: null,
    productPic: null,
    productName: null,
    productBrand: null,
    productAttr: null,
    productCount: null,
    productPrice: null,
    productRealPrice: null,
    reason: null,
    description: null,
    proofPics: null,
    handleNote: null,
    handleMan: null,
    receiveMan: null,
    receiveTime: null,
    receiveNote: null
  };

  export default {
    name: 'returnApplyDetail',
    data() {
      return {
        id: null,
        articleReturnDetail: Object.assign({},defaultarticleReturnDetail),
        productList: null,
        proofPics: null,
        updateStatusParam: Object.assign({}, defaultUpdateStatusParam),
        companyAddressList: null,
      }
    },
    created() {
      this.id = this.$route.query.id;
      this.getDetail();
    },
    computed: {
      totalAmount() {
        if (this.articleReturnDetail != null) {
          return this.articleReturnDetail.productRealPrice * this.articleReturnDetail.productCount;
        } else {
          return 0;
        }
      },
      currentAddress() {
        console.log("currentAddress()");
        let id = this.updateStatusParam.companyAddressId;
        if(this.companyAddressList==null)return {};
        for (let i = 0; i < this.companyAddressList.length; i++) {
          let address = this.companyAddressList[i];
          if (address.id === id) {
            return address;
          }
        }
        return null;
      }
    },
    filters: {
      formatStatus(status) {
        if (status === 0) {
          return "待处理";
        } else if (status === 1) {
          return "退货中";
        } else if (status === 2) {
          return "已完成";
        } else {
          return "已拒绝";
        }
      },
      formatTime(time) {
        if (time == null || time === '') {
          return 'N/A';
        }
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      },
      formatRegion(address) {
        let str = address.province;
        if (address.city != null) {
          str += "  " + address.city;
        }
        str += "  " + address.region;
        return str;
      }
    },
    methods: {
      handleViewOrder(){
        this.$router.push({path:'/oms/orderDetail',query:{id:this.articleReturnDetail.orderId}});
      },
      getDetail() {
        detailsArticle(this.id).then(response => {
          this.articleReturnDetail = response.data;
          this.productList = [];
          this.productList.push(this.articleReturnDetail);
          if (this.articleReturnDetail.proofPics != null) {
            this.proofPics = this.articleReturnDetail.proofPics.split(",")
          }
          //退货中和完成
          if(this.articleReturnDetail.status===1||this.articleReturnDetail.status===2){
            this.updateStatusParam.returnAmount=this.articleReturnDetail.returnAmount;
            this.updateStatusParam.companyAddressId=this.articleReturnDetail.companyAddressId;
          }
          this.getCompanyAddressList();
        });
      },
      getCompanyAddressList() {
        fetchList().then(response => {
          console.log("getCompanyAddressList()")
          this.companyAddressList = response.data;
          for (let i = 0; i < this.companyAddressList.length; i++) {
            if (this.companyAddressList[i].receiveStatus === 1&&this.articleReturnDetail.status===0) {
              this.updateStatusParam.companyAddressId = this.companyAddressList[i].id;
            }
          }
        });
      },
      handleUpdateStatus(status){
        this.updateStatusParam.status=status;
        this.$confirm('是否要进行此操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateApplyStatus(this.id,this.updateStatusParam).then(response=>{
            this.$message({
              type: 'success',
              message: '操作成功!',
              duration:1000
            });
            this.$router.back();
          });
        });
      }
    }
  }
</script>
<style scoped>
  .detail-container {
    position: absolute;
    left: 0;
    right: 0;
    width: 1080px;
    padding: 35px 35px 15px 35px;
    margin: 20px auto;
  }

  .standard-margin {
    margin-top: 15px;
  }
  .form-border {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
  }

  .form-container-border {
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
    margin-top: 15px;
  }

  .form-left-bg {
    background: #F2F6FC;
  }
</style>


